<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 权限列表 -->
    <!-- {{ listData }} -->
    <el-table :data="listData.data" border style="width: 100%" class="qxlist">
      <el-table-column align="center" label="序号" type="index" width="80" />
      <el-table-column
        align="center"
        prop="authName"
        label="权限名称"
      />
      <el-table-column align="center" prop="path" label="路径" />
      <el-table-column align="center" prop="level" label="权限等级">
        <template #default="scoped">
          <el-tag v-if="scoped.row.level==='0'">一级</el-tag>
          <el-tag v-else-if="scoped.row.level==='1'" class="ml-2" type="success">二级</el-tag>
          <el-tag v-else class="ml-2" type="warning">三级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRef } from "vue-demi";
import service from "../../until/service";

let listData = reactive({
  data: [],
});
//权限列表获取
onMounted(() => {
  service
    .get(`rights/list`)
    .then((res) => {
      listData.data = toRef(res.data, "data");
      console.log(listData);
    })
    .catch((error) => console.log(error));
});
</script>

<style scoped>
.qxlist {
  margin-top: 20px;
}
</style>